<!DOCTYPE html>
<!-- 声明html5标准 -->
<html lang='zh'>
<!-- 这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这句话就是让搜索引擎知道，你的站点是中文站
对html页面本身不会有影响,这些现在都是html规范，你的页面越规范，就越容易被收录 -->

<head>
    <meta charset='UTF-8'>
    <!-- 声明使用UTF-8 Unicode编码，UTF-8编码优先采用的编码 -->
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <!--  X-UA-Compatible是针对IE新加的一个设置 声明兼容到edge -->
    <meta name='viewport' content='width=device-width, initial-scale=no'>
    <!--width:可视区域的宽度，值可为数字或关键词device-width intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 -->
    <title>Document</title>
    <!-- 引入vue.js -->
    <script src='./js/vue.js'></script>
</head>

<body>
    <div id='root'>
        <div>
            {{name | format}}
        </div>
        <div v-color="'red'">
            123456
        </div>
        <div v-color="">{{address}}</div>
        <button @click="address='地狱'">点击更改address的值</button>
    </div>
    <script>
        // 定义全局自定义指令， 
        // 两个参数 ： 1：自定义指令的名字 2：对象 
        Vue.directive("color", {
            // 对象内 有三个钩子函数。 
            // 刚刚挂在到标签时触发
            bind(el, param) {
                console.log(param)
                el.style.backgroundColor = param.value;
                // el  dom元素  
                // param 
            },
            // dom元素加载完成时触发
            inserted(el, param) {
            },
            // 当组件更新时使用 。
            // 触发两个因素。 1：定义在data里的值发生改变时 .
            // 2:data里的和标签绑定在一起时.(通过单向或双向的数据绑定,插值表达式.)
            update(el, param) {
                debugger
            }
        })
        // 全局过滤器；
        // 两个参数 1：过滤器的名字；2：回调函数  
        Vue.filter("format", function (data, param) {
            // 使用过滤器，要return出去一个值;
            // 需求：在name后添加上地址;
            return data + "方大科技园"
        })
        let vue = new Vue({
            // 选择控制区域,通过选择器去选到他，工作中一般使用id选择器;
            el: '#root',
            // 数据储存位置
            data: {
                name: "天亮教育",
                address: "天堂"
            },
            // 方法的储存位置
            methods: {},
            filters: {
                // 私有过滤器的优先级高于全局过滤器;
                format(data, param) {
                    return data + "123456";
                    padStart() // 第一个参数为显示的位数， 第二个参数为位数不足时，补充什么。 
                    padEnd() //第一个参数为显示的位数， 第二个参数为位数不足时，补充什么。
                    //字符串,
                }
            },
            directives: {
                color: {
                    // 对象内 有三个钩子函数。 
                    // 刚刚挂在到标签时触发
                    bind(el, param) {
                        console.log(param)
                        el.style.backgroundColor = param.value;
                        // el  dom元素  
                        // param 
                    },
                    // dom元素加载完成时触发
                    inserted(el, param) {
                    },
                    // 当组件更新时使用 。
                    // 触发两个因素。 1：定义在data里的值发生改变时 .
                    // 2:data里的和标签绑定在一起时.(通过单向或双向的数据绑定,插值表达式.)
                    update(el, param) {
                        debugger
                    }
                }
            }

        })
    </script>
</body>

</html>